<template>
  <div id="app">
    <!-- 导航部分 -->
    <div class="nav">
      <img src="./assets/logo.png" alt="" class="logo" />
      <div class="menu">
        <p @click="scrollTo('about')">ABOUT SIGNIN</p>
        <p @click="scrollTo('works')">HOW IT WORKS</p>
        <p @click="scrollTo('team')">TEAM&LNVESTORS</p>
        <p @click="open('https://signin.art/files/signin_metavers.pdf')">
          WHITE PAPER
        </p>
        <p @click="open('https://signin.art/auction')">
          SIGNIN AUCTION
        </p>
      </div>
    </div>
    <!-- banner部分 -->
    <div class="banner">
      <img src="./assets/banner-bg.jpg" alt="" class="banner-bg" />
      <p>Web 3.0 Protocol for the Metaverse</p>
    </div>
    <!-- Content部分 -->
    <div class="content">
      <div class="content-cotainer">
        <div class="title-container" id="works">
          <div class="left-component">
            <img
              src="./assets/how-sign-works.png"
              class="two-line-title"
              alt=""
            />
            <p>LOGIN INFINITY</p>
          </div>
          <div class="right-component">
            <img src="./assets/star.png" alt="" />
            <img src="./assets/direction-space-left.png" alt="" />
          </div>
        </div>
        <p class="infrastructure">
          Three tiers of IT infrastructure and building the Spatial Web
        </p>
        <p class="technologies">
          As the technologies and capabilities that compose and connect IT
          architecture converge, the Spatial Web will mature. The figure below
          shows how key enabling technologies drive their respective computing
          eras.
        </p>
        <div class="technologie-container">
          <p class="technologie-title">ARCHITECTURAL LAYER</p>
          <img class="light-line" src="./assets/light-line.png" alt="" />
          <div class="web-container">
            <div class="web-container-title">
              <div>Web 1.0 <br />(1990s-2000s)*</div>
              <div>Web 3.0 I Spatial Web <br />(2020s and beyond)*</div>
              <div>
                Web 2.0<br />
                (2010s-2020s)*
              </div>
            </div>
            <div class="web-container-bottom">
              <img src="./assets/web.png" alt="" />
              <p class="left one">Desktop browser<br />(click and type)</p>
              <p class="left two">Situated server <br />(via wire)</p>
              <p class="left three">Structured <br />(SQL)</p>
              <p class="middle one">
                Wearable AR/VR, voice, and loT devices<br />(show and tell)
              </p>
              <p class="middle two">
                Distributed computing <br />(via Al, 5G + Edge)
              </p>
              <p class="middle three">
                Distributed ledgertechnology<br />(blockchain)
              </p>
              <p class="right one">
                Mobile touch-screen <br />(touch and swipe)
              </p>
              <p class="right two">Cloud computing <br />(via 3-4G)</p>
              <p class="right three">Unstructured <br />(big data)</p>
              <p class="end one">Interaction</p>
              <p class="end two">Computation</p>
              <p class="end three">Information</p>
            </div>
          </div>
        </div>
        <div class="title-container" id="team">
          <div class="left-component">
            <img src="./assets/core-team.png" class="one-line-title" alt="" />
            <p>LOGIN INFINITY</p>
          </div>
          <div class="right-component">
            <img src="./assets/star.png" alt="" />
            <img src="./assets/direction-space-left.png" alt="" />
          </div>
        </div>
        <div class="team-container ">
          <div class="box-container">
            <div style="position:relative">
              <img class="user-border" src="./assets/team01wine.png" alt="" />
              <img
                src="./assets/play.png"
                class="play-btn"
                alt=""
                @click="showVideo = true"
              />
            </div>
            <p class="name">CONNIE LEARY</p>
            <div class="post">
              <img src="./assets/light-box.png" alt="" />
              <p>PROJECT MANAGER</p>
            </div>
          </div>
          <div class="box-container">
            <div style="position:relative">
              <img class="user-border" src="./assets/team02wine.png" alt="" />
              <img
                src="./assets/play.png"
                class="play-btn"
                alt=""
                @click="showVideo = true"
              />
            </div>
            <p class="name">DALLAS MROZ</p>
            <div class="post">
              <img src="./assets/light-box.png" alt="" />
              <p>CONTENT MANAGER</p>
            </div>
          </div>
          <div class="box-container">
            <div style="position:relative">
              <img class="user-border" src="./assets/team03wine.png" alt="" />
              <img
                src="./assets/play.png"
                class="play-btn"
                alt=""
                @click="showVideo = true"
              />
            </div>
            <p class="name">THURMAN ANDRINGA</p>
            <div class="post">
              <img src="./assets/light-box.png" alt="" />
              <p>ART DIRECTOR</p>
            </div>
          </div>
          <div class="box-container">
            <div style="position:relative">
              <img class="user-border" src="./assets/team04wine.png" alt="" />
              <img
                src="./assets/play.png"
                class="play-btn"
                alt=""
                @click="showVideo = true"
              />
            </div>
            <p class="name">GENARO YEARGIN</p>

            <div class="post">
              <img src="./assets/light-box.png" alt="" />
              <p>TECHNICAL MANAGER</p>
            </div>
          </div>
        </div>
        <div class="title-container">
          <div class="left-component">
            <img src="./assets/investors.png" class="one-line-title" alt="" />
            <p>LOGIN INFINITY</p>
          </div>
          <div class="right-component">
            <img src="./assets/star.png" alt="" />
            <img src="./assets/direction-space-left.png" alt="" />
          </div>
        </div>
        <div class="investors-container ">
          <div class="investors-box">
            <img src="./assets/metaverse money0531.png" alt="" />
          </div>
          <div class="investors-box">
            <img src="./assets/liaode.png" alt="" />
          </div>
          <div class="investors-box">
            <img src="./assets/layerX0531.png" alt="" />
          </div>
          <div class="investors-box">
            <img src="./assets/future0531.png" alt="" />
          </div>
          <div class="investors-box">
            <img src="./assets/fbg.png" alt="" />
          </div>
        </div>
        <img class="bottom-light" src="./assets/bottom-light.png" alt="" />
      </div>
      <dir class="linear-line"></dir>
      <div class="footer">
        <p class="copyright">© Copyright reserved by SIGNIN</p>
        <div class="platform">
          <img
            src="./assets/twitterwine.png"
            @click="open('https://twitter.com/signin_art')"
            alt=""
          />
          <img
            src="./assets/telegramwine.png"
            @click="open('https://t.me/signin_art')"
            alt=""
          />
        </div>
      </div>
    </div>
    <div v-if="showVideo" class="play-box" @click="stopVideo">
      <div class="video-box">
        <video
          id="video"
          autoplay
          height="100%"
          src="https://signin.art/video/show.mp4"
        ></video>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showVideo: false,
    };
  },
  computed: {
    projects() {
      return [
        "Lack of quality content",
        "Ownership, subsequent value transfer and rediscovery process need to be configured",
        "Without social or network effect",
        "Immersive experience to be improved",
        "Cross platform solution is missing, without interoperability",
      ];
    },
    products() {
      return [
        {
          title: "Creation platform",
          content:
            "Standard, easy to use process to create programmable, transportable NFT, non-static, interactive, immersive with AI functionality",
        },
        {
          title: "Management platform",
          content:
            "To create value for NFT by increase the awareness, entertainment, application case and liquidity (GameFi)",
        },
        {
          title: "Trading platform",
          content: "To realize and unlock value of NFT via DeFi application",
        },
      ];
    },
  },
  methods: {
    scrollTo(id) {
      document.getElementById(id).scrollIntoView();
    },
    open(url) {
      window.open(url, "_blank");
    },
    stopVideo() {
      this.showVideo = false;
      document.getElementById("video").stop();
    },
  },
  mounted() {
    document.title = "Signin";
  },
};
</script>

<style lang="less">
@yellow: #ffcc33;
body {
  margin: 0;
  min-width: 1200px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background-color: black;
  color: white;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;

  .nav {
    width: 100%;
    height: 80px;
    background: rgb(0, 0, 0);
    position: relative;

    .logo {
      position: absolute;
      top: 20px;
      left: 100px;
      height: 40px;
      width: auto;
    }

    .menu {
      position: absolute;
      width: 600px;
      height: 40px;
      right: 20px;
      top: 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      p {
        cursor: pointer;
        font-size: 14px;
        color: white;
      }
    }
  }

  .banner {
    position: relative;

    .banner-bg {
      display: block;
      width: 100%;
      height: auto;
      margin-top: -1px;
    }

    p {
      color: white;
      font-size: 20px;
      position: absolute;
      left: 50%;
      top: 70%;
      transform: translate(-50%, -50%);
    }
  }

  .content {
    position: relative;
    margin-top: -1px;
    overflow: auto;
    background-image: url("./assets/content-bg.png");
    background-repeat: repeat-y;
    background-size: 100% auto;

    .content-cotainer {
      width: 84%;
      margin-left: 8%;
      top: 0;
      padding-top: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title-container {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 80px;

        .left-component {
          display: flex;
          flex-direction: column;

          .one-line-title {
            height: 59px;
            width: auto;
          }

          .two-line-title {
            height: 150px;
            width: auto;
          }

          p {
            margin-top: 50px;
            color: @yellow;
            letter-spacing: 15px;
            text-align: left;
          }
        }

        .right-component {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-end;
          width: 300px;

          :nth-child(1) {
            margin-top: -20px;
            height: 40px;
            width: auto;
          }

          :nth-child(2) {
            height: 50px;
            width: auto;
          }
        }
      }

      .infrastructure {
        color: @yellow;
        width: 100%;
        text-align: left;
        font-size: 30px;
        margin-bottom: 0px;
      }

      .technologies {
        color: white;
        width: 100%;
        text-align: left;
        font-size: 20px;
      }

      .technologie-container {
        display: flex;
        flex-direction: row;
        margin: 100px 0 50px 0;

        .technologie-title {
          width: 20px;
          line-height: 30px;
          font-size: 20px;
          letter-spacing: 5px;
          word-break: break-all;
          writing-mode: vertical-rl;
          margin-left: 0;
          text-align: left;
          margin-right: 20px;
        }

        .light-line {
          margin-top: -5px;
          margin-right: 10%;
          width: 20px;
          height: 100%;
        }

        .web-container {
          width: calc(90% - 60px);

          .web-container-bottom {
            position: relative;
            width: 100%;

            .left {
              left: 9.5%;
              transform: translate(-50%, -50%);
              font-weight: bold;

              &.one {
                top: 12%;
              }

              &.two {
                top: 44%;
              }

              &.three {
                top: 74%;
              }
            }

            .middle {
              transform: translate(-50%, -50%);
              left: 43%;
              color: @yellow;
              &.one {
                top: 12%;
              }

              &.two {
                top: 43%;
              }

              &.three {
                top: 74%;
              }
            }

            .right {
              transform: translate(-50%, -50%);
              left: 77%;
              font-weight: bold;
              &.one {
                top: 12%;
              }

              &.two {
                top: 44%;
              }

              &.three {
                top: 74%;
              }
            }

            .end {
              right: 15px;
              text-align: right;
              color: @yellow;
              font-weight: bold;
              font-size: 12px;

              &.one {
                top: 14%;
              }

              &.two {
                top: 46%;
              }

              &.three {
                top: 75%;
              }
            }
          }

          .web-container-title {
            position: relative;
            height: 100px;
            width: 86%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            div {
              width: 200px;
              font-size: 20px;
            }

            :nth-child(2) {
              color: @yellow;
            }
          }

          img {
            width: 100%;
            height: auto;
          }

          p {
            position: absolute;
            width: 180px;
          }
        }
      }

      .team-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .box-container {
          width: 25%;
          position: relative;
          padding: 50px;
          margin-top: 50px;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .play-btn {
            position: absolute;
            left: 60px;
            top: 50px;
            width: 100px;
            height: 100px;
            opacity: 0;
            cursor: pointer;
          }

          .user-border {
            width: 200px;
            height: 200px;
          }

          :hover .play-btn {
            opacity: 1;
          }

          .user {
            position: absolute;
            height: 50%;
            width: auto;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          .name {
            font-weight: bold;
            font-size: 18px;
            color: white;
            margin-top: 10px;
            margin-bottom: 0px;
          }

          .post {
            display: flex;
            width: 100%;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            img {
              height: 80px;
              width: 80px;
              margin-right: 10px;
            }

            p {
              color: @yellow;
              font-weight: bold;
            }
          }
        }
      }

      .investors-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;

        .investors-box {
          width: 20%;
          // height: 100px;
          position: relative;
          // background-color: @yellow;
          margin-top: 20px;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            height: auto;
            width: calc(100% - 20px);
          }
        }
      }

      .bottom-light {
        margin-top: 50px;
        height: 80px;
        width: auto;
      }
    }
  }

  .linear-line {
    background-image: linear-gradient(
      to right,
      rgb(206, 24, 236) 0%,
      rgb(102, 1, 245) 100%
    );
    width: 100%;
    height: 5px;
    margin: 0;
  }

  .footer {
    height: 80;
    padding-left: 80px;
    padding-right: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .copyright {
      color: white;
    }

    .platform {
      img {
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }

  .play-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(33, 33, 33, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .video-box {
      width: 70%;
      height: 0;
      background: black;
      box-shadow: 0 0 20px #c200d4;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      padding-top: 35%;

      video {
        border-radius: 10px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
  }
}
</style>
